The ais-configure widget lets you provide raw search parameters to the Algolia API without rendering anything. Any props you pass to this widget are forwarded to Algolia.
  <ais-configure
    // Optional parameters
    :searchParameters
  />

Import

Import ais-configure as a component or with a plugin.
import { AisConfigure } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
components: {
    AisConfigure
},
// ...
};
To ensure your code is correctly bundled, see Optimize build size.

Props

searchParameters
object
required
A list of search parameters to enable.The props must use camel case since they’re directly forwarded to the Algolia API. In HTML or string templates, you can do this by adding .camel before the value of the prop.

Customize the UI

Slots

default
Use the default slot to override the DOM output. When you implement this slot, none of the other slots will change the output, as the default slot surrounds them.

Scopes

  • searchParameters: object: the current search parameters applied to the search.
  • refine: (object) => void: the function to change the search parameters applied to the search.

Customization example

<ais-configure :enable-rules.camel="false" :hits-per-page.camel="5">
  <template v-slot="{ searchParameters, refine }">
    <button
      @click="refine({
        ...searchParameters,
        enableRules: !searchParameters.enableRules,
      })"
    >Toggle only query rules</button>
    Currently applied filters:
    <pre>{{ searchParameters }}</pre>
  </template>
</ais-configure>